<template>
  <div>
    <!-- 不传插槽会显示这个默认内容 -->
    <slot name="loading" v-if="isLoading">默认加载中的效果...</slot>
    <!-- 这样写一定是普通对象了 -->
    <!-- 可以使用v-bind绑定多个数据 -->
    <slot name="error" v-else-if="error" :error="error">{{ error }}</slot>
    <!-- 通过 v-bind 将子组件的插槽数据绑定到了父组件插槽的位置 -->
    <!-- 当渲染这个组件的时候，会把数据传过去 -->

    <slot name="default" v-else :content="content">{{ content }}</slot>
    <!-- 可以直接这样写，到底绑定了哪些属性，看v-bind写法 -->
    <!-- <slot name="default" v-else v-bind="content">{{ content }}</slot> -->
  </div>
</template>

<script>
export default {
  props: {
    contentPromise: Promise,
  },
  data() {
    return {
      isLoading: true,
      content: null,
      error: null,
    };
  },
  async created() {
    try {
      this.content = await this.contentPromise;
      this.error = null;
    } catch (err) {
      this.content = null;
      this.error = err; // error对象没办法进行响应式，这里注意vue中尽量写普通对象
      // this.error = {error: err.message}; // 这里可以用对象包裹一下，这样可以进行响应式
    } finally {
      this.isLoading = false;
    }
  },
  mounted() {
    // 平时不咋用
    console.log("$slots", this.$slots); // 记录普通插槽生成的vnode
    console.log("$scopedSlots", this.$scopedSlots); // 记录所有的插槽，包括普通的插槽，可以这样理解，普通插槽是没有参数的作用域插槽，它是一些函数，函数调用的结果是vnode的数组（可能有多个节点）
  },
};
</script>
